import { ProCard } from "@ant-design/pro-components";
import { Editor, Frame, Element } from "@craftjs/core";
import { Toolbox } from "./components/Toolbox";
import { SettingPane } from "./components/SettingPane";
import { Toolbar } from "./components/Toolbar";

import "./App.css";
import { DraggableForm } from "./components/user/DraggableForm";
import { DraggableFormText } from "./components/user/DraggableFormText";
import { useRef } from "react";
import { RenderNode } from "./components/RenderNode";

function App() {
  const editAreaRef = useRef<HTMLDivElement>(null);

  return (
    <Editor
      resolver={{ DraggableForm, DraggableFormText }}
      onRender={({ render }) => (
        <RenderNode editAreaRef={editAreaRef} render={render} />
      )}
    >
      <ProCard
        title="表单编辑器"
        bordered
        headerBordered
        split="vertical"
        extra={<Toolbar />}
      >
        <ProCard title="工具箱" colSpan="15%">
          <Toolbox />
        </ProCard>
        <ProCard title="编辑区" style={{ minHeight: 600 }}>
          <div ref={editAreaRef}>
            <Frame>
              <Element is={DraggableForm as any} canvas />
            </Frame>
          </div>
        </ProCard>

        <ProCard title="属性设置面板" colSpan="20%">
          <SettingPane />
        </ProCard>
      </ProCard>
    </Editor>
  );
}

export default App;
